<!--
 * @Author: your name
 * @Date: 2021-03-31 10:30:44
 * @LastEditTime: 2021-04-23 20:18:58
 * @LastEditors: Please set LastEditors
 * @Description: 高级选项
 * @FilePath: /medicine-web/src/components/SeniorOptions/index.vue
-->
<template>
  <div class="senior-options-container">
    <ul>
      <li class="font-pattern-4 senior-options" v-for="item in seniorOptionsList" :key="item.name" @click.stop="selectOption(item)">
        {{item.name}}
        <img :src="require('@/assets/image/arrowUp.png')" alt="" style="width: 14px; height: 14px; margin-left: 17px;" v-show="item.isSelected">
        <img :src="require('@/assets/image/arrowDown.png')" alt="" style="width: 14px; height: 14px; margin-left: 17px;" v-show="!item.isSelected">
      </li>
    </ul>
    <ul class="senior-options__item">
      <li @click.stop="handleSelection(item)" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" v-for="item in seniorOptionsContent" :key="item.name">
        {{item.name}}
      </li>
    </ul>
    <ul class="senior-options__item_sub" v-if="seniorOptionsContentSub">
      <li @click.stop="handleSelectionSub(item)" :class="{ 'font-pattern-4': true, 'font-pattern-4__active': item.isSelected, 'font-pattern-4__deactive': !item.isSelected }" v-for="item in seniorOptionsContentSub" :key="item.name">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'seniorOptions',
  data () {
    return {
      name: this.seniorOptionsList[0].name,
      seniorOptionsContent: null, // 一级
      seniorOptionsContentSub: null, // 二级
    }
  },
  methods: {
    selectOption (selection) {
      this.seniorOptionsContentSub = null
      for (let item of this.seniorOptionsList) {
        item.isSelected = false
        if (item == selection) {
          this.$nextTick (() => {
            this.seniorOptionsContent = item.children
          })
        }
      }
      selection.isSelected = true
      this.name = selection.name
      this.$action('refreshSeniorOptions', { optionsList: this.seniorOptionsList, typeStr: this.name })
    },
    handleSelection (raw) {
      raw.isSelected = !raw.isSelected
      if (raw.children && raw.children.length > 0) {
        this.seniorOptionsContentSub = raw.children
      } else {
        this.seniorOptionsContentSub = null
      }
      this.$forceUpdate()
      this.$emit('hasSelected', { name: this.name, value: raw.name, isSelected: raw.isSelected })
    },
    handleSelectionSub (raw) {
      raw.isSelected = !raw.isSelected
      this.$forceUpdate()
      this.$emit('hasSelected', { name: this.name, value: raw.name, isSelected: raw.isSelected })
    }
  },
  computed: {
    keepItemStatus () {
      return this.$store.getters.optionsList
    }
  },
  mounted () {
    this.seniorOptionsContent = this.seniorOptionsList[0].children
  },
  props: {
    seniorOptionsList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    seniorOptionsList: {
      handler(val, old) {
        this.seniorOptionsContent = this.seniorOptionsContent && this.seniorOptionsContent.length > 0 ? this.seniorOptionsContent : val[0].children
      },
      deep: true
    },
    keepItemStatus :{
      handler(val, old) {
        if (val && val.optionsList) {
          for (const item of val.optionsList) {
            if (item.name === val.typeStr) {
              this.seniorOptionsContent = item.children
              if (item.children && item.children.length > 0) {
                for (let o of item.children) {
                  if (o.children && o.children.length > 0) {
                    for (let b of o.children) {
                      if (this.seniorOptionsContentSub && this.seniorOptionsContentSub.length > 0) {
                        for (let a of this.seniorOptionsContentSub) {
                          if (a.name == b.name) {
                            a.isSelected = b.isSelected
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.senior-options-container {
  width: 100%;
  ul {
    @include flex-def;
    @include flex-cCenter;
    padding: 0;
    margin: 0;
    .senior-options {
      padding: 4px 11px 4px 13px;
      border-top: 1px solid rgba(0, 0, 0, 0.21);
      border-left: 1px solid rgba(0, 0, 0, 0.21);
      border-right: 1px solid rgba(0, 0, 0, 0.21);
      border-radius: 2px;
      margin-right: 11px;
      font-size: 13px;
      @include flex-def;
      @include flex-cCenter;
      cursor: pointer;
    }
  }
  .senior-options__item {
    border: 1px solid #ccc;
    border-radius: 2px;
    @include flex-def;
    @include flex-cCenter;
    li {
      margin: 4px 19px;
      cursor: pointer;
    }
  }
  .senior-options__item_sub {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-radius: 2px;
    @include flex-def;
    @include flex-cCenter;
    li {
      margin: 4px 19px;
      cursor: pointer;
    }
  }
}
</style>